<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>收支查看</title>
    <link rel="stylesheet" type="text/css" th:href="@{../static/css/nav.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{../static/css/index.css}" />
</head>
<body>
        <div class="nav">
            <div><a id="index" th:href="@{/toIndex}">收支查询</a></div>
            <div><a id="index2" th:href="@{/toIndex2}">财务明细</a></div>
            <div><a id="index3" th:href="@{/toIndex3}">成员管理</a></div>
            <div id="nav"></div>
            <div><a id="login" th:href="${session.name==null}?'/login/toLogin':'/login/toHomepage'"><p id="logState">登录</p></a></div>
        </div>

        <div class="search">
            <form action="/query/all0" method="post" name="searchForm" id="sform">
                <input id="search" type="text" placeholder="搜索添加者或描述..." name="queryContent">
                <input id="search-btn" type="button" value="搜索" onclick="fsearch()">
            </form>
        </div>
        <div class="add">
            <a th:href="@{/add/toAdd}"><button>增加</button></a>
        </div>
        <div id="tableFrame">
            <div id="tableFrameTitle">
                <ul>
                    <li>添加者</li>
                    <li>金额</li>
                    <li>类型</li>
                    <li>日期</li>
                    <li>描述</li>
                    <li>删除标记</li>
                    <li>操作</li>
                </ul>
            </div>
            <div id="tableCase">
                <ul th:each="r:${records}">
                    <li th:text="${r.getAdder()}"></li>
                    <li th:text="${r.getMoney()}"></li>
                    <li th:text="${r.getType()}"></li>
                    <li th:text="${r.getDate()}"></li>
                    <li th:text="${r.getDescribes()}"></li>
                    <li th:text="${r.getDeleted()}"></li>
                    <li>
                        <a th:href="@{/update/toEdit(id=${r.getId()})}">编辑</a>
                        <a th:href="@{/delete/id0(id=${r.getId()})}">删除</a>
                    </li>
                </ul>
            </div>
        </div>
        <br \>
        <div id="page">
            <button class="prev" onclick="lastpage()">上一页</button>
            <div class="page">
                第 <span id="pagenum" ></span> 页
            </div>
            <button class="next" onclick="nextpage()">下一页</button>
        </div>

<style>
    li {
        width:137.85px;
    }
</style>

<script th:inline="javascript">
    window.onload = function() {
        var name = [[${session.name}]];
        console.log(name)
        if (name!=null && name!=""){
            document.getElementById("logState").innerText = name;
        }
        //解决直接访问无数据的情况
        var re = [[${records}]];
        if (re==null) fsearch();

        //显示页数
        document.getElementById("pagenum").innerText = [[${pagenum}]];
    }

    function fsearch(){
        var queryContent = document.getElementById("search").value;
        var sform = document.getElementById("sform");
        if (queryContent===null || queryContent===""){
            sform.action = "/query/all0?page=0";
        }else {
            sform.action = "/query/some0?page=0";
        }
        sform.submit();
    }

    function nextpage(){
        var sform = document.getElementById("sform");
        document.getElementById("search").value = "LASTCONDITION";
        sform.action = "/query/some0?page=" + [[${pagenum}]];
        sform.submit();
    }

    function lastpage(){
        var sform = document.getElementById("sform");
        document.getElementById("search").value = "LASTCONDITION";
        sform.action = "/query/some0?page=" + ([[${pagenum}]] - 2);
        sform.submit();
    }
</script>
</body>
</html>

